<template>
	<div class="table-demo-container layout-padding">
		<div class="table-demo-padding layout-padding-view layout-padding-auto">
			<div style="display: flex;justify-content: space-between;height: calc(100% - 8px);">
				<div class="menu-left">
					<team @selectPlan="getSelectPlanInfo" @deletePlan="deletePlan"></team>
				</div>
				<el-calendar v-if="state.isShow" v-model="state.row.startOn" class="layout-padding-view" style="width: 62%;"
					ref="calendar">
					<template #header="{ date }">
						<span>考勤计划：<el-text type="primary" style="font-size: 14px;">{{ state.row.name }} </el-text></span>
						<span>{{ date }}</span>
						<el-button-group>
							<el-button size="small" @click="selectDate('prev-month')">
								前一月
							</el-button>
							<el-button size="small" @click="selectDate('next-month')">
								后一月
							</el-button>
						</el-button-group>
					</template>
					<template #date-cell="{ data }">
						<div @click="clickDate(data)">
							<div class="cell">
								<div> <el-text type="info" style="font-size: 14px;">{{
									data.day.split('-').slice(1).join('-') }}</el-text></div>
								<div v-for="item in state.planData" :key="item.day">
									<div v-if="data.day === item.day" style="margin-top: 5px;">
										<el-tag :type="item.isRest === 2 ? 'primary' : 'success'">{{ item.isRest === 2 ?
											'上班' :
											'休息' }}</el-tag>
									</div>
								</div>
							</div>
						</div>
					</template>
				</el-calendar>
				<div v-else class="layout-padding-view" style="width: 62%;padding: 10px;">请选择考勤计划</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { CalendarDateType, CalendarInstance } from 'element-plus';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { useAttendPlanInfoApi } from '/@/api/attend/plan';
import moment from 'moment';
const team = defineAsyncComponent(() => import('./team/index.vue'));
// 定义变量内容
interface planInter {
	day: string
	teamName: string
	ruleName: string
	isRest: number
}

const state = reactive({
	// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
	row: {
		name: '',
		startOn: '',
		endOn: ''
	},
	isShow: false,
	planData: [] as planInter[]
});
const date = ref(new Date(2024, 2, 1))
const calendar = ref<CalendarInstance>()

const deletePlan = () => {
	state.isShow = false
}
const getSelectPlanInfo = ({ code, startOn, endOn, name }: any) => {
	state.row.name = name
	state.row.startOn = moment(startOn).format('YYYY-MM-DD')
	state.row.endOn = moment(endOn).format('YYYY-MM-DD')
	if (code) {
		useAttendPlanInfoApi({ code: code }).then(({ content }) => {
			state.isShow = true
			state.planData = content
		})
	}
}

const selectDate = (val: CalendarDateType) => {
	if (!calendar.value) return
	console.log(moment(date.value).format('YYYY-MM-DD'))
	console.log(val)
	calendar.value.selectDate(val)
	console.log(calendar.value, '123')
}
const clickDate = (data: CalendarDateType) => {
	console.log(data)
}
// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
.table-demo-container {
	.table-demo-padding {
		padding: 15px;
		padding-bottom: 0;

		.table-demo {
			flex: 1;
			overflow: hidden;
		}
	}
}

.menu-left {
	width: 37%;

}

:deep(.el-calendar .prev>.el-calendar-day) {
	visibility: hidden;
}

:deep(.el-calendar .next>.el-calendar-day) {
	visibility: hidden;
}

:deep(.el-calendar .is-today) {
	color: #000;
}

:deep(.el-calendar .is-selected) {
	color: #000;
	background-color: transparent;
}

.cell {
	box-sizing: border-box;
	padding-top: 5%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around
}
</style>
